<template>
	<view class="prize-preview-packbox">
		<view class="preview-content">
			<comCarouselBox :resLists="resLists" />

			<view class="preview-desc font-hanserif-bold">
				共 <text style="color: #63FFF7;">{{ num }}</text> 件 | 价值 <text style="color: #63FFF7;">{{ price }}</text> 机能
			</view>

			<view class="preview-list flex-wrap">
				<view v-for="(item,index) in resLists" :key="index" class="preview-info">
					<view class="info-box relative flex-all-center">
						<!-- 奖品类型: 1赏品 2优惠券 3机能 -->
						<image class="bg" v-if="item.type === 1 || item.type === 3" :src="commonConfigs.domainFrontFileLink + '/files/images/welfareHouse/goods-bg.png'" mode=""></image>

						<image :src="item.reward_item_cover" mode="heightFix" style="position: relative;top: -12rpx;" class="info-cover" v-if="item.type === 1" />
						<image :src="item.reward_item_cover" mode="heightFix" style="position: relative;top: -12rpx;" class="info-balanch" v-if="item.type === 3" />

						<view :style="{'background-image' : `url(${item.reward_item_cover})` }" class="info-detail relative font-hanserif-bold" v-if="item.type === 2">
							<view class="detail-title truncate">{{ item.subtitile }}</view>

							<view class="detail-dates flex-direction-column flex-start">
								<view style="text-align: left;">有效期至:</view>
								<view style="white-space: nowrap;">{{ item.end_time }}</view>
							</view>

							<view class="detail-price truncate">
								<text>¥{{ item.recovery_price }}</text>
								<view style="font-size: 10rpx;">抵扣券</view>
							</view>
						</view>
					</view>

					<view class="info-name truncate">
						<text>{{ item.reward_item_name }}</text>
						<text v-if="item.type === 3">*{{ item.num }}</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "comHousePrizePreview",
		props: {
			num: String | Number,
			price: String | Number,
			resLists: Array,
		},
		data() {
			return {

			}
		},
		computed: {
			commonConfigs() {
				return this.$store.getters.commonConfigs || {};
			}
		},
	}
</script>

<style lang="scss" scoped>
	.prize-preview-packbox {
		width: 100%;

		.preview-content {
			.preview-desc {
				margin-top: 20rpx;
				margin-bottom: 20rpx;
				text-align: center;
				font-size: 30rpx;
				color: #FFFFFF;
			}

			.preview-list {
				border-radius: 10rpx;
				width: 96%;
				padding: 24rpx 0 0 14rpx;
				margin: 0 auto;

				.preview-info {
					width: 150rpx;
					height: 200rpx;
					margin: 0 8rpx;

					.info-box {
						width: 148rpx;
						height: 148rpx;
					}

					.info-detail {
						width: 130rpx;
						height: 176rpx;
						color: #000;
						text-align: center;
						padding-top: 38rpx;
						background-size: 100% 100%;
						
						.detail-price {
							width: 100%;
							font-size: 28rpx;
						}

						.detail-title {
							width: 100%;
							height: 24rpx;
							font-size: 18rpx;
							color: #000;
						}

						.detail-dates {
							font-size: 12rpx;
							color: #000000;
							margin: 10rpx 0;

						}
					}

					.info-cover {
						width: 100%;
						height: 116rpx;
					}

					.info-balanch {
						width: 82rpx;
						height: 82rpx;
					}

					.info-name {
						font-size: 20rpx;
						color: #FFFFFF;
						width: 100%;
						margin-top: 8rpx;
						margin-bottom: 16rpx;
						text-align: center;
					}
				}
			}
		}
	}
</style>